<ngm-splitter [type]="1" class="flex-1 w-full h-full">
    <ngm-splitter-pane class="flex flex-col justify-end items-stretch z-[101]">
        <div class="pac-sub-toolbar pac-toolbar__editor py-1 px-2 flex justify-start items-center gap-2">
            <button mat-flat-button color="primary" displayDensity="compact"
                matTooltip=" {{ 'PAC.KEY_WORDS.ShortcutKey' | translate: {Default: 'Shortcut Key'} }}: F8"
                [disabled]="!statement"
                (click)="run()">
                <mat-icon fontSet="material-icons-round">arrow_right</mat-icon>

                <span *ngIf="textSelection()?.text">
                    {{ 'PAC.MENU.RUN_BY_SELECTION' | translate: {Default: "Run By Selection"} }}
                </span>
                <span *ngIf="!textSelection()?.text">
                    {{ 'PAC.MENU.RUN' | translate: {Default: "Run"} }}
                </span>
            </button>

            <span class="flex-1"></span>
            
            <button mat-icon-button displayDensity="compact" matTooltip="🔍{{ 'PAC.KEY_WORDS.Search' | translate: {Default: 'Search'} }}"
                (click)="triggerFind()">
                <mat-icon fontSet="material-icons-round">search</mat-icon>
            </button>
            <button mat-icon-button displayDensity="compact" matTooltip="⛔{{ 'PAC.KEY_WORDS.Clear' | translate: {Default: 'Clear'} }}"
                (click)="triggerClear()">
                <mat-icon fontSet="material-icons-round">playlist_remove</mat-icon>
            </button>
            
          @if (!useMDX()) {
            <button mat-icon-button displayDensity="compact" matTooltip="📦{{ 'PAC.KEY_WORDS.Compact' | translate: {Default: 'Compact'} }}"
                (click)="triggerCompress()">
                <mat-icon fontSet="material-icons-outlined">folder_zip</mat-icon>
            </button>
          }
            <button mat-icon-button displayDensity="compact" matTooltip="💡{{ 'PAC.KEY_WORDS.Format' | translate: {Default: 'Format'} }}"
                (click)="triggerFormat()">
                <mat-icon fontSet="material-icons-round">format_indent_increase</mat-icon>
            </button>
        </div>

        @if (useMDX()) {
            <ngm-mdx-editor #editor class="pac-cdk-drop__list pac-cdk-drop__area flex-1 w-full h-full"
                [theme]="themeName()"    
                [entityType]="entityType()"
                [ngModel]="statement()"
                (ngModelChange)="onStatementChange($event)"
                (selectionChange)="onSelectionChange($event)"
                (keyDown)="onEditorKeyDown($event)"

                cdkDropList
                [cdkDropListData]="entities"
                (cdkDropListDropped)="drop($event)"
            />
        } @else {
            <ngm-sql-editor #editor class="pac-cdk-drop__list pac-cdk-drop__area flex-1 w-full h-full"
                [theme]="themeName()"    
                [entityType]="entityType()"
                [entitySets]="tables()"
                [ngModel]="statement()"
                (ngModelChange)="onStatementChange($event)"
                (selectionChange)="onSelectionChange($event)"
                (keyDown)="onEditorKeyDown($event)"

                cdkDropList
                [cdkDropListData]="entities"
                (cdkDropListDropped)="drop($event)"
            />
        }
    </ngm-splitter-pane>
    <ngm-splitter-pane size='15rem' class="relative flex flex-col justify-start items-stretch"
        [collapsed]="!showQueryResult()"
    >
        <ngm-table *ngIf="!_error(); else errorResult" class="pac-model-ql-lab__result pac-cdk-drop__list pac-cdk-drop__area striped flex-1 h-full"
            [columns]="columns"
            [data]="data"
            [paging]="true"
            cdkDropList
            [cdkDropListData]="entities"
            (cdkDropListDropped)="dropTable($event)"
        ></ngm-table>

        <ng-template #errorResult>
            <div class="pac-result h-full w-full absolute top-0 left-0">
                <div class="bug font-notoColorEmoji">🐞</div>
                <div class="description">
                    {{_error()}}
                </div>
            </div>
        </ng-template>
        
        <div *ngIf="loading$ | async" class="emoji-loader h-full w-full absolute top-0 left-0"></div>

        <div *ngIf="loading$ | async" class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center z-[101] bg-gray-500/10 backdrop-blur-lg">
            <div class="emoji-loader" style="position: relative; height: 80px;"></div>
            <button mat-stroked-button (click)="cancelQuery()">
                {{ 'PAC.KEY_WORDS.Cancel' | translate: {Default: 'Cancel'} }}
            </button>
        </div>
    </ngm-splitter-pane>
</ngm-splitter>